<!DOCTYPE html>
<html>
<head>
    <title>Space Shooter- Preview</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>
        window.gameOrder = "F,G,N";
        var jqXHR = $.ajax({
            type: "POST",
            url: "../MGGameService.svc/getGamesOrder/",
            data: JSON.stringify({}),
            dataType: 'text',
            success: function (data) {
                window.gameOrder = data;
                window.gameOrder = window.gameOrder.replace(/"/g, "");
                console.log("window.gameOrder (succeded) - " + data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                
            }
        }).done(function (data) {
            console.log("window.gameOrder (done) - " + window.gameOrder);
            window.url = window.url + "&gameOrder=" + window.gameOrder;
        });
    </script>
    <script>
        window.isPreviewGame = true;
    </script>
    <script>
        (function () {
            var match,
            pl = /\+/g, // Regex for replacing addition symbol with a space
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) {
                return decodeURIComponent(s.replace(pl, " "));
            },
            query = window.location.search.substring(1);

            var urlParams = {};
            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);

            window.turkSubmitTo = urlParams["turkSubmitTo"];
            window.assignmentId = urlParams["assignmentId"];
            window.url = "index.html?turkSubmitTo=" + turkSubmitTo + "&assignmentId=" + window.assignmentId;
        })();
        function goToGame() {
            window.location = window.url;
        }
    </script>
    <script type="text/javascript" src="js/jquery.timer.js"></script>
    <script type="text/javascript" src="js/timer.js"></script>

    <script type="text/javascript" src="js/strategies.js"></script>
    <script type="text/javascript" src="js/scenario.js"></script>
    <script type="text/javascript" src="js/GameEventListener.js"></script>
    <script type="text/javascript" src="js/GameEventListenerList.js"></script>
    <script type="text/javascript" src="js/alertAdvisers.js"></script>
    <script type="text/javascript" src="js/performanceCalculator.js"></script>
    <script type="text/javascript" src="js/trialController.js"></script>
    <script type="text/javascript" src="js/performanceHolder.js"></script>
    <script type="text/javascript" src="js/GameMessageBuffer.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>

    <!--<script type="text/javascript" src="js/controllerPreview.js"></script>-->
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type="text/javascript" src="js/feulChart.js"></script>
</head>
<body>
    <!--<h1 style="text-align:center">Game Preview</h1> -->

    <div id="game">
        <!-- The canvas for the panning background -->
        <canvas id="background" width="900" height="600">
            Your browser does not support canvas. Please try again with a different browser.
        </canvas>
        <canvas id="flashBackground" width="900" height="600"></canvas>
        <!-- The canvas for all enemy ships and bullets -->
        <canvas id="main" width="900" height="600"></canvas>
        <canvas id="feulstation" width="900" height="600"></canvas>
        <!-- The canvas the ship uses (can only move up
        one forth the screen. -->
        <canvas id="ship" width="900" height="600"></canvas>
        <canvas id="feulship" width="900" height="600"></canvas>
        <canvas id="scoreCan" width="900" height="600"></canvas>
        <canvas id="mechanicalScoreCanvas" width="900" height="600"></canvas>
        <canvas id="alertCan" width="900" height="600"></canvas>

        <div class="mechanicalPanel">
            <div id="mainatenancePanel">
                <canvas id="maintenanceButtonPanelCanvas" width="200" height="200">msgIcon</canvas>
                <button id="buttonMechanicalPanel" onclick="maintenanceActionDone()"> </button>
            </div>
            <div id="repairPanel">
                <canvas id="repairButtonPanelCanvas" width="200" height="200">msgIcon</canvas>
                <button id="buttonRepairMechanicalPanel" onclick="mechanicalActionDone()"> </button>
            </div>
        </div>

        <div id="feul">
            <div id="feulChart"></div>
            <!--	<p style="position:absolute;top:200px;left:80px;font-size:15px"><span id="gaugePre" style="font-size:25px"></span>sec</p> -->
        </div>

        <div class="messagesPanel">
            <canvas id="messagesPanelCanvas" width="660" height="150">msgIcon</canvas>
        </div>

        <div class="score">
            <p>YOUR SCORE: <span id="score"></span></p>
            <p>LEFT TIME: <span id="time">00:00 m</span></p>
        </div>





        <div id="maintenance">
            <div class="maintenance">
                <button id="maintenanceButton" onclick="maintenanceActionDone()" style="display:inline-block">
                    Maintenance<br />
                    Cost: <span id="mainCost"></span> points
                </button>
            </div>
        </div>
        <div id="tec">
            <p>MECHANICAL CONDITION</p>
            <canvas id="techStatus" width="190" height="258">[No canvas support]</canvas>
            <p id="mechTitle">all well</p>
            <button id="repairButton" onclick="mechanicalActionDone()">Repair<br />Cost: <span id="repCost"></span> points</button>
        </div>

        <p id="freezeTitle">The space ship is frozen because of <span id="freezeReason"></span> <span id="freezeSec"></span> sec</p>

        <div class="game-over" id="game-over">GAME OVER</br>Your score is:<span id="endScore"></span><p><span onclick="game.restart()">Restart</span></p></div>
        <div class="loading" id="loading">LOADING...<p>Please wait</p></div>
    </div>
    <div style="text-align:center;z-index:5000">

    </div>
    <script src="js/panelController.js"></script>
    <script src="js/game.js"></script>
    <div id="dialog-message" title=""></div>

</body>
</html>
